<template>
  <div>
    <h1>父组件</h1>
    <hr />
    <!-- 子组件 
    父传子  
    1. 子组件身上绑定自定义属性
    -->
    <Son :money="money" msg="hi son!" @change-money="changeMoney" />
    <!-- 
    子传父
    2. 子组件定义自定义事件
     -->
    <!-- <Son :money="money" :msg="123" /> -->
  </div>
</template>

<script setup>
// 导入子组件=》导入即注册，导入的名字就是组件的标签名
import { ref, provide } from 'vue'
import Son from './son.vue'
/**
 * 组件通信
 * 目的：共享数据
 * 背景：
 * 因为组件是独立封闭的单元，无法共享数据
 * 原则：单项数据流=》谁的数据谁负责
 * 父子通信：
 * 1. 父传子
 *    1.1 props
 *
 * 2. 子传父
 *    2.1 $emit
 *
 */
const money = ref(1e5)
const changeMoney = (newMoney) => {
  console.log('子传父数据：', newMoney)
  money.value = newMoney
}
/**
 * 跨多级组件通信
 * 依赖注入步骤：
 * 1. 在顶层组件中，向下注入共享数据：provide('key', value)
 * 2. 顶层组件下的任意子组件中，通过inject('key')获取共享数据
 */
// 向下注入共享数据
provide('mky', money)
// 向下注入修改数据方法
provide('change-mky', changeMoney)
</script>

<style lang="scss" scoped></style>
